<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>瀑布流图片（CSS3 Column版）</title>
    <style>
    #main {
        position: relative;
        column-width: 200px;
    }
    
    .box {
        padding: 6px 0 6px 10px;
    }
    
    .pic {
        width: 182px;
        border: 1px solid #ccc;
        border-radius: 5px;
        padding: 5px;
        background: white;
    }
    
    .pic img {
        width: 100%;
    }
    </style>
</head>

<body>
    <div id="main">
        <div class="box">
            <div class="pic">
                <img src="../../source/image/1.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../../source/image/2.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../../source/image/3.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../../source/image/4.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../../source/image/5.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../../source/image/6.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../../source/image/1.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../../source/image/2.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../../source/image/3.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../../source/image/4.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../../source/image/5.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../../source/image/6.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../../source/image/1.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../../source/image/2.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../../source/image/3.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../../source/image/4.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../../source/image/5.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../../source/image/6.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../../source/image/1.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../../source/image/2.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../../source/image/3.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../../source/image/4.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../../source/image/5.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../../source/image/6.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../../source/image/1.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../../source/image/2.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../../source/image/3.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../../source/image/4.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../../source/image/5.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../../source/image/6.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../../source/image/1.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../../source/image/2.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../../source/image/3.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../../source/image/4.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../../source/image/5.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../../source/image/6.jpg">
            </div>
        </div>
    </div>
    <script>
    window.onload = function() {
        var oBoxs = $('.box'), // 这些变量必须设置为全局的
            oMain = $('#main')[0]; // 装载所有图片的div

        window.onscroll = function() {
            clearTimeout(handleScroll.tID);
            handleScroll.tID = setTimeout(function() {
                handleScroll();
            }, 200)
        }

        function handleScroll() {
            var lastBox = oBoxs[oBoxs.length - 1];
            var lastBoxTop = lastBox.offsetTop; // 距离页面顶部的高度
            var lastBoxHeight = lastBox.offsetHeight; // 自身高度
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //注意解决兼容性
            var bodyHeight = document.documentElement.clientHeight; //可视区高度

            // 加载图片的条件
            if ((scrollTop + bodyHeight) > lastBoxTop) {
                console.log('加载图片')
                loadImg(oMain);
            }
        }
    }

    // 选择器函数
    function $(selector) {
        return document.querySelectorAll(selector);
    }

    // 将图片包装成box后，加载到mainDiv中
    function loadImg(mainDiv) {
        var imgData = {
            data: [{
                'src': '5.png'
            }, {
                'src': '6.jpg'
            }, {
                'src': '8.jpg'
            }]
        };
        var prefix = '../../source/image/';

        imgData.data.forEach(function(val, index) {
            var oPic = document.createElement('div');
            oPic.className = 'pic';
            var oBox = document.createElement('div');
            oBox.className = 'box';
            var img = document.createElement('img');
            img.src = prefix + val.src;

            oPic.appendChild(img);
            oBox.appendChild(oPic);
            mainDiv.appendChild(oBox);
        });
    }
    </script>
</body>

</html>
